<template>
  <e-group :value="myValue" @add="handleAdd" @remove="handleRemove" :button-disabled="buttonDisabled" :max-item="maxItem" style="width: 100%">
    <template slot-scope="scope">
      <el-col :span="20">
        <el-input
          class="input-middle"
          v-bind="$props"
          type="textarea"
          :autosize="{ minRows: 3}"
          :maxlength="300"
          :value="scope.item.text"
          v-bind:style="{width: '900px'}"
          @change="handleChange(scope.index,$event)" number-word/>
      </el-col>
    </template>
  </e-group>
</template>
<script>
  import {Input} from '@element-ui'
  import EGroup from '@e-ui/Group'
  export default {
    components: {
      EGroup
    },
    props: {
      ...Input.props, // 继承Input的所有属性
      ...EGroup.props,
      value: {},
      valueType: {}
    },
    watch: {
      value (value) {
        let data = []
        if (this.valueType === 'array') {
          value.forEach(item => {
            data.push({
              text: item
            })
          })
          this.myValue = data
        } else {
          this.myValue = value
        }
      }
    },
    data () {
      let myValue = this.value
      if (!this.value || this.value.length === 0) {
        myValue = [{
          text: ''
        }]
      }
      return {
        myValue
      }
    },
    methods: {
      handleChange (index, value) {
        this.myValue[index].text = value
        let data = this.handleDataType()
        this.$emit('change', data).$emit('input', data)
      },
      handleAdd (index) {
        this.myValue.push({
          text: ''
        })
      },
      handleRemove (index) {
        this.myValue.splice(index, 1)
        let data = this.handleDataType()
        this.$emit('change', data).$emit('input', data)
      },
      handleDataType () {
        let data = []
        if (this.valueType === 'array') {
          this.myValue.forEach(item => {
            data.push(item.text)
          })
        } else {
          data = this.myValue
        }
        return data
      }
    }
  }
</script>
<style lang="scss">
    
</style>
